<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>医生列表</title>
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <link rel="stylesheet" href="../../static/lib/layui/css/layui.css" media="all" />
  <link rel="stylesheet" href="../../static/css/admin.css" media="all" />
  <style>
    .layui-table-cell{
      height:auto !important;
    }
  </style>
</head>

<body>
  <div id="TMM_app">
    <div class="layui-fluid">
      <div class="layui-card">
        <div class="layui-tab layui-tab-brief tmm-table-tab" lay-filter="component-tabs-brief">
          <ul class="layui-tab-title" id="ulStatus">
            <li status="0" id="order0" class="layui-this"></li>
            <li status="1" id="order1"></li>
            <li status="2" id="order2"></li>
            <li status="3" id="order3"></li>
            <li status="4" id="order4"></li>
            <li status="10" id="order10"></li>
          </ul>
          <div class="layui-tab-content">
          </div>
        </div>
        <div class="layui-form layui-card-header tmm-admin-card-header-auto tmm-filter-form">
          <input type="hidden" id="statusInput"/>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">邀请码</label>
              <div class="layui-input-inline">
                <input type="text" name="mcode" id="mcode" placeholder="邀请码" autocomplete="off" class="layui-input" />
              </div>
            </div>
            <div class="layui-inline">
              <button class="layui-btn tmm-admin-btn-list" lay-submit="" id="query" lay-filter="LAY-app-contlist-search">
                搜索
              </button>
            </div>
          </div>
        </div>
        <div class="layui-card-body">
          <span style="color: red">上级信息：</span>
          <table id="tmm-doctors-table2" class="layui-table">
            <thead>
            <tr>
              <th lay-data="{field:'mcode', width:200}">账号</th>
              <th lay-data="{field:'nickName', width:150}">昵称</th>
              <th lay-data="{field:'avatarUrl', minWidth: 180}">头像</th>
              <th lay-data="{field:'roleName', minWidth: 180}">角色</th>
              <th lay-data="{field:'reg_time', minWidth: 180}">注册时间</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td id="mcodeTd"></td>
              <td id="nickNameTd"></td>
              <td id="avatarUrlTd"></td>
              <td id="roelNameTd"></td>
              <td id="regTimeTd"></td>
            </tr>
            </tbody>
          </table>
          <span style="color: blue">下级信息：</span>
          <table id="tmm-doctors-table" lay-filter="tmm-doctors" class="layui-table"></table>
        </div>
      </div>
    </div>
  </div>

  <script src="../../static/lib/layui/layui.js"></script>
  <script>
    layui
      .config({
        base: "../../static/js/"
      })
      .extend({
        index: "index"
      })
      .use(["index", "table", "laydate"], function () {
        var $ = layui.$,
          admin = layui.admin,
          view = layui.view,
          table = layui.table,
          form = layui.form;
          laydate = layui.laydate,

          laydate.render({
            elem: "#time",
            type:'datetime'
          });



        $(".layui-btn.tmm-admin-btn-tags").on("click", function () {
          var type = $(this).data("type");
          active[type] ? active[type].call(this) : "";
        });

        table.render({
          elem: "#tmm-doctors-table",
          skin: 'nob',
          size: 'lg',
          height: 'full-200',
          even: true,
          page: true,
          limit: 10,
          limits: [10, 20, 50],
          url: "${path}/tbUser/relationData",
          where:{
              mcode:$("#mcode").val()
          },
          cols: [[
              {field:'mcode', title: '账号'},
              {field:'nickName', title: '昵称'},
              {field:'avatarUrl', title: '头像',templet:function (d) {
                  var html ='暂无图片';
                  if(d.avatarUrl!=null && d.avatarUrl!=''){
                    html = '<img src="'+d.avatarUrl+'" style="height: 50px;width: 50px"/>';
                  }
                  return html;
              }},
              {field:'roleName', title: '角色'},
              {field:'reg_time', title: '注册时间',width:"14%",templet:function (d) {
                  if(d.reg_time!=null && d.reg_time!=''){
                      return d.reg_time.substring(0,19)
                  }
                  return "无";
              }},
            ]],
          done: function(res, curr, count){
              $(".layui-table-main  tr").each(function (index ,val) {
                  $($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
              });
            $.ajax({
              type: "post",
              url: "${path}/tbUser/supUser",
              dataType: "json",
              data:{mcode:$("#mcode").val()},
              success: function (data) {
                console.log(data);
                if(data.data!=null && data.data!=''){
                  $("#mcodeTd").append(data.data.mcode);
                  $("#nickNameTd").append(data.data.nickName);
                  $("#avatarUrlTd").append('<img src="'+data.data.avatarUrl+'" style="height:50px;width: 50px"/>');
                  $("#roelNameTd").append(data.data.roleName);
                  $("#regTimeTd").append(data.data.reg_time);
                }

              }
            });
          },
          text:{none:"暂无数据"},
        });

        //查询
        $('#query').on('click', function(){
            table.reload('tmm-doctors-table', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    mcode:$("#mcode").val()
                }
            }, 'data');
        });
      });
  </script>
</body>

</html>